<template>
<div v-wechat-title="$route.meta.title"></div>
    <Header />
    <div class="home">
    <div v-for="article in articles.data" v-bind:key="article.id" id="card">
      <el-card class="box-card" shadow="hover">
        <router-link
          :to="{ name: 'ArticleDetail', params: { id: article.id } }"
          class="article-title"
        >
          {{ article.title }}
        </router-link>
         &nbsp;
        <span class="created-time"
          >{{ dateformat(article.created_at) }} created</span
        >
        &nbsp;

        <span class="created-time">文章类别：
          <span>{{article.Category.name}}</span>
        </span>
        &nbsp;

        <span class="created-time">作者：{{ article.user_name }}</span>
        &nbsp;

        <span class="created-time"><heart-outlined :style="{fontSize: '20px', color: 'red'}" />likes:{{ article.stars }}</span>
      </el-card>
      
    </div>
    
    <div class="pagination">
      <el-pagination
        small
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="articles.total"
        :page-size="pageSize"
        :current-page="pageNum"
      >
      </el-pagination>
    </div>
  </div>
    <Footer />
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

import articleService from "@/service/articleService";
import dateformat from "@/utils/dateformat";

import { HeartOutlined } from '@ant-design/icons-vue';

export default {
    name: "Column",
    components: { Header, Footer,HeartOutlined },

    data() {
    return {
      articles: "",
    };
  },

  mounted() {
    articleService.get_article_column("column/" + this.$route.params.name)
      .then((response) => (this.articles = response.data.data));
  },
  methods: {
    dateformat,
    getData(n1, n2) {
      articleService.get_pagelist("column/" + this.$route.params.id + "?pageNum="+n2+"&pageSize="+n1)
        .then((response) => (this.articles = response.data.data));
    },
    handleCurrentChange(val) {
      this.pageSize = 10;
      this.pageNum = val;
      this.getData(this.pageSize, val);
    },
  },
};

</script>

<style scoped>
#card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box-card {
  width: 600px;
  margin-bottom:10px;

}
.article-title {
  color: black;
  text-decoration: none;
  padding: 5px 0 5px 0;
  font-family: "Ubuntu", "Noto Serif SC", source-han-serif-sc, sans-serif;
  font-weight: 700;
  font-style: normal;
}
.article-title:hover {
  color: grey;
}
.created-time {
  font-size: 13px;
  display: flex;
  justify-content: right;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

</style>